<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
  <!-- 代理、反射 -->
  <script>

    //源对象
    const person = {
      name: '坏猪',
      age: 24
    }
    console.log('源对象--->', person)

    //代理对象
    let proxyObj = new Proxy(person, {
      //查
      get(target, propName) {
        console.log(`拦截到获取 ${propName} 属性操作`)
        return Reflect.get(target, propName)
      },
      //增、改
      set(target, propName, value) {
        console.log(`拦截到修改 ${propName} 属性值为 ${value} 操作`)
        Reflect.set(target, propName, value)
      },
      //删
      deleteProperty(target, propName) {
        console.log(`拦截到删除 ${propName} 属性操作`)
        return Reflect.deleteProperty(target, propName)
      }
    })
    console.log('代理对象--->', proxyObj)

  </script>
</body>
</html>
